/**
 * @title 范围与 step
 * @description 与 number-picker 结合
 */

import * as React from 'react'
import styled from 'styled-components'

import { Range, NumberPicker, Icon } from '@alicloudfe/components'

const Demo = () => {
  const [valueInc, setValueInc] = React.useState(30)

  const colorCry = ``
  return (
    <div style={{ width: 400 }}>
      <div style={{ display: 'flex' }}>
        <Range
          value={valueInc}
          onChange={setValueInc}
          min={0}
          max={100}
          step={5}
          style={{ marginRight: 10 }}
        />
        <NumberPicker
          value={valueInc}
          onChange={setValueInc}
          min={0}
          max={100}
          step={5}
        />
      </div>
      <div style={{ display: 'flex', marginTop: 20 }}>
        <Icon
          type="cry"
          style={{
            marginRight: 10,
            color: `rgba(50,50,50, ${(100 - valueInc) / 100})`
          }}
        />
        <Range
          value={valueInc}
          onProcess={setValueInc}
          min={0}
          max={100}
          style={{ marginRight: 10 }}
        />
        <Icon
          type="smile"
          style={{ color: `rgba(50,50,50, ${valueInc / 100})` }}
        />
      </div>
    </div>
  )
}

export default function DemoComponent() {
  const content = <Demo />
  return <Style>{content}</Style>
}
const Style = styled.div``
